<template>
  <div class="qht">
    <HomeTop />
    <div class="qht_beijing">
      <div class="lunbo">
        <img src="../assets/imgs/product/qht/qht_banner_pic.jpg" alt="" />
      </div>
      <div class="yun_soft animate-el">
        <img src="../assets/imgs/product/qht/banner_tips.png" alt="" />
      </div>
    </div>
    <div class="qht_effect">
      <ul>
        <li>
          <div class="fisrt_bg1">
            <img src="../assets/imgs/product/qht/introduce_bg.png" alt="" />
            <img class="zoomin" src="../assets/imgs/product/qht/introduce_pic_1.png" alt="" />
            <div class="fisrt_bg1_wenzi">
              <h2 class="animate-el">分享展示，宣传推广</h2>
              <div class="fisrt_bg1_wenzi_p">
                <p class="animate-el">
                 对商家产品进行包装展示，吸引客户浏览分享，刺激客户线下到店消费，实现可持续性拓客引流
                </p>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="fisrt_bg2">
            <img src="../assets/imgs/product/qht/introduce_bg.png" alt="" />
            <img class="zoomin" src="../assets/imgs/product/qht/introduce_pic_2.png" alt="" />
            <div class="fisrt_bg2_wenzi">
              <h2 class="animate-el">超便捷的收银管理</h2>
              <div class="fisrt_bg2_wenzi_p">
                <p class="animate-el">
                  无纸化办公，将前台变为服务台，挂单收银、办卡充值、会员建档等极速办理，便捷高效
                </p>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="fisrt_bg3">
            <img src="../assets/imgs/product/qht/introduce_bg.png" alt="" />
            <img class="zoomin" src="../assets/imgs/product/qht/introduce_pic_3.png" alt="" />
            <div class="fisrt_bg3_wenzi">
              <h2 class="animate-el">超贴心的会员管理</h2>
              <div class="fisrt_bg3_wenzi_p">
                <p class="animate-el">精细用户画像、会员分级管理，每个会员都有自己的专属标签</p>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="fisrt_bg4">
            <img src="../assets/imgs/product/qht/introduce_bg.png" alt="" />
            <img class="zoomin" src="../assets/imgs/product/qht/introduce_pic_4.png" alt="" />
            <div class="fisrt_bg4_wenzi">
              <h2 class="animate-el">超高效的产品管理</h2>
              <div class="fisrt_bg4_wenzi_p">
                <p class="animate-el">
                  标准化进销存管理，避免库存积压，资源精准匹配，降低仓库管理成本
                </p>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="fisrt_bg5">
            <img src="../assets/imgs/product/qht/introduce_bg.png" alt="" />
            <img  class="zoomin" src="../assets/imgs/product/qht/introduce_pic_5.png" alt="" />
            <div class="fisrt_bg5_wenzi">
              <h2 class="animate-el">超实用的自定义报表</h2>
              <div class="fisrt_bg5_wenzi_p">
                <p class="animate-el">
                  企业可依据自身需求定制适合企业的报表，满足不同企业的差异化需求
                </p>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="fisrt_bg6">
            <img src="../assets/imgs/product/qht/introduce_bg.png" alt="" />
            <img class="zoomin" src="../assets/imgs/product/qht/introduce_pic_6.png" alt="" />
            <div class="fisrt_bg6_wenzi">
              <h2 class="animate-el">超标准的连锁店管理</h2>
              <div class="fisrt_bg6_wenzi_p">
                <p class="animate-el">
                  多店操作，经营数据实时同步，方便统一管理，科学制定经营决策
                </p>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <HomeBottom />
  </div>
</template>

<script>
import Observer from "../utils/observer";
import HomeTop from "@/components/Hometop.vue";
import HomeBottom from "@/components/Homebottom.vue";
export default {
  name: "Qht",
  components: {
    HomeTop,
    HomeBottom,
  },
  mounted() {
    const els = document.querySelectorAll(".animate-el");
    this.Observer = Observer(
      {
        els: els,
      },
      function (el) {
        el.style.visibility = "visible";
        el.classList.add("animate__fadeInDown");
      }
    );
    const els2 = document.querySelectorAll(".zoomin");
    this.Observer2 = Observer(
      {
        els: els2,
      },
      function (el) {
        el.style.visibility = "visible";
        el.classList.add("animate__zoomIn");
      }
    );
    let registerData = {
      companyName: "",
      phoneNumber: "",
      linkman: "",
      companyAdress: "",
      leaveMessage: "",
    };
  },
};
</script>

<style scoped>
.lunbo img {
  width: 100%;
  height: 651px;
}
.yun_soft {
  width: 834px;
  height: 140px;
  margin: auto;
  margin-top: 124px;
}
.qht_effect ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: auto;
  width: 1348px;
  margin-bottom: 280px;
}
.qht_effect ul li {
  width: 615px;
  height: 756px;
  border: 1px dashed #4a96ea;
  margin-top: 254px;
  border-radius: 35px;
  position: relative;
}
.qht_effect ul li:nth-child(1) {
  margin-top: 180px;
}
.qht_effect ul li:nth-child(2) {
  margin-top: 180px;
}
.fisrt_bg1 img {
  width: 615px;
  height: 756px;
  position: absolute;
  top: -34px;
  left: 27px;
}
.fisrt_bg1 img:nth-child(2) {
  max-width: 66%;
  height: auto;
  position: absolute;
  top: -19px;
  left: 87px;
}
.fisrt_bg1_wenzi {
  width: 428px;
  height: 148px;
  /* background-color: tomato; */
  position: absolute;
  top: 425px;
  left: 117px;
}
.fisrt_bg1_wenzi h2 {
  color: #4590e6;
  font-weight: 600;
  text-align: left;
  font-size: 40px;
}
.fisrt_bg1_wenzi_p {
  width: 432px;
  height: 84px;
  margin-top: 25px;
  border-top: 1px dashed #4590e6;
}
.fisrt_bg1_wenzi_p p {
  color: rgb(183, 176, 167);
  font-size: 23px;
  line-height: 34px;
  margin-top: 10px;
}
.fisrt_bg2 img {
  width: 615px;
  height: 756px;
  position: absolute;
  top: -34px;
  left: 27px;
}
.fisrt_bg2 img:nth-child(2) {
  max-width: 66%;
  height: auto;
  position: absolute;
  top: -19px;
  left: 87px;
}
.fisrt_bg2_wenzi {
  width: 428px;
  height: 148px;
  /* background-color: tomato; */
  position: absolute;
  top: 425px;
  left: 117px;
}
.fisrt_bg2_wenzi h2 {
  color: #4590e6;
  font-weight: 600;
  text-align: left;
  font-size: 40px;
}
.fisrt_bg2_wenzi_p {
  width: 432px;
  height: 84px;
  margin-top: 25px;
  border-top: 1px dashed #4590e6;
}
.fisrt_bg2_wenzi_p p {
  color: rgb(183, 176, 167);
  font-size: 23px;
  line-height: 34px;
  margin-top: 10px;
}

.fisrt_bg3 img {
  width: 615px;
  height: 756px;
  position: absolute;
  top: -34px;
  left: 27px;
}
.fisrt_bg3 img:nth-child(2) {
  max-width: 66%;
  height: auto;
  position: absolute;
  top: 9px;
  left: 104px;
}
.fisrt_bg3_wenzi {
  width: 428px;
  height: 148px;
  /* background-color: tomato; */
  position: absolute;
  top: 425px;
  left: 117px;
}
.fisrt_bg3_wenzi h2 {
  color: #4590e6;
  font-weight: 600;
  text-align: left;
  font-size: 40px;
}
.fisrt_bg3_wenzi_p {
  width: 432px;
  height: 84px;
  margin-top: 25px;
  border-top: 1px dashed #4590e6;
}
.fisrt_bg3_wenzi_p p {
  color: rgb(183, 176, 167);
  font-size: 23px;
  line-height: 34px;
  margin-top: 10px;
}

.fisrt_bg4 img {
  width: 615px;
  height: 756px;
  position: absolute;
  top: -34px;
  left: 27px;
}
.fisrt_bg4 img:nth-child(2) {
  max-width: 66%;
  height: auto;
  position: absolute;
  top: -19px;
  left: 87px;
}
.fisrt_bg4_wenzi {
  width: 428px;
  height: 148px;
  /* background-color: tomato; */
  position: absolute;
  top: 425px;
  left: 117px;
}
.fisrt_bg4_wenzi h2 {
  color: #4590e6;
  font-weight: 600;
  text-align: left;
  font-size: 40px;
}
.fisrt_bg4_wenzi_p {
  width: 432px;
  height: 84px;
  margin-top: 25px;
  border-top: 1px dashed #4590e6;
}
.fisrt_bg4_wenzi_p p {
  color: rgb(183, 176, 167);
  font-size: 23px;
  line-height: 34px;
  margin-top: 10px;
}

.fisrt_bg5 img {
  width: 615px;
  height: 756px;
  position: absolute;
  top: -34px;
  left: 27px;
}
.fisrt_bg5 img:nth-child(2) {
  max-width: 66%;
  height: auto;
  position: absolute;
  top: 24px;
  left: 116px;
}
.fisrt_bg5_wenzi {
  width: 428px;
  height: 148px;
  /* background-color: tomato; */
  position: absolute;
  top: 425px;
  left: 117px;
}
.fisrt_bg5_wenzi h2 {
  color: #4590e6;
  font-weight: 600;
  text-align: left;
  font-size: 40px;
}
.fisrt_bg5_wenzi_p {
  width: 432px;
  height: 84px;
  margin-top: 25px;
  border-top: 1px dashed #4590e6;
}
.fisrt_bg5_wenzi_p p {
  color: rgb(183, 176, 167);
  font-size: 23px;
  line-height: 34px;
  margin-top: 10px;
}

.fisrt_bg6 img {
  width: 615px;
  height: 756px;
  position: absolute;
  top: -34px;
  left: 27px;
}
.fisrt_bg6 img:nth-child(2) {
  max-width: 66%;
  height: auto;
  position: absolute;
  top: -19px;
  left: 87px;
}
.fisrt_bg6_wenzi {
  width: 428px;
  height: 148px;
  /* background-color: tomato; */
  position: absolute;
  top: 425px;
  left: 117px;
}
.fisrt_bg6_wenzi h2 {
  color: #4590e6;
  font-weight: 600;
  text-align: left;
  font-size: 40px;
}
.fisrt_bg6_wenzi_p {
  width: 432px;
  height: 84px;
  margin-top: 25px;
  border-top: 1px dashed #4590e6;
}
.fisrt_bg6_wenzi_p p {
  color: rgb(183, 176, 167);
  font-size: 23px;
  line-height: 34px;
  margin-top: 10px;
}
</style>